<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>商品列表</title>
    <link rel="icon" href="/favicon.ico"/>
    <link rel="stylesheet" href="/lib/icon-font/iconfont.css" />
    <link rel="stylesheet" href="/css/reset.css" />
    <link rel="stylesheet" href="/css/header.css" />
    <link rel="stylesheet" href="/css/nav.css" />
    <link rel="stylesheet" href="/css/footer.css" />
    <link rel="stylesheet" href="/css/list.css" />
</head>

<body>

    <header>
    </header>

    <!-- 滚动时nav添加class="scrollnav" -->
    <nav>
    </nav>
    <section>
        <div class="container subNav">
            <ul>
                <li>综合排序</li>
                <li>·</li>
                <li>价格由低到高</li>
                <li>·</li>
                <li>价格由高到低</li>
            </ul>
        </div>
        <div class="container">
            <!-- 重复的各板块商品展示部分 -->
            <ul class="hotbar">
               
                <!-- <ul>
                    <li>
                        <a><img src="../img/hot1.png" /></a>
                        <h3>坚果R2</h3>
                        <p>是下一代手机，更是下一代电脑</p>
                        <b></b>
                        <em>&yen;4,799.00</em>
                        <i class="showtips">买赠</i>
                        <aside>大促</aside>
                    </li>
                    <li>
                        <a><img src="../img/list1-2.png" /></a>
                        <h3>Smartisan TNT 大满足套装</h3>
                        <p>下一代手机，下一代电脑</p>
                        <b></b>
                        <em>&yen;6,999.00</em>
                        <i>买赠</i>
                        <aside>大促</aside>
                    </li>
                    <li>
                        <a><img src="../img/list1-6.jpg" /></a>
                        <h3>2020年足迹系列卫衣 人类首次突破音速</h3>
                        <p>精心裁剪、版型百搭、舒适服帖、易于打理</p>
                        <b>
                            <span class="black checked"></span>
                            <span></span>
                            <span class="blue"></span>
                            <span class="gray"></span>
                        </b>
                        <em>&yen;224.00<del>&yen;249.00</del></em>
                        <i>买赠</i>
                        <aside>大促</aside>
                    </li>
                    <li>
                        <a><img src="../img/list1-4.jpg" /></a>
                        <h3>Smartisan 真无线蓝牙耳机</h3>
                        <p>抖音文创限量款</p>
                        <b>
                        </b>
                        <em>&yen;279.00<del>&yen;299.00</del></em>
                        <i>买赠</i>
                        <aside class="showtips">大促</aside>
                    </li>
                </ul>
                <ul>
                    <li>
                        <a><img src="../img/list1-5.jpg" /></a>
                        <h3>坚果R2</h3>
                        <p>是下一代手机，更是下一代电脑</p>
                        <b></b>
                        <em>&yen;4,799.00</em>
                        <i class="showtips">买赠</i>
                        <aside>大促</aside>
                    </li>
                    <li>
                        <a><img src="../img/list1-7.jpg" /></a>
                        <h3>Smartisan TNT 大满足套装</h3>
                        <p>下一代手机，下一代电脑</p>
                        <b></b>
                        <em>&yen;6,999.00</em>
                        <i>买赠</i>
                        <aside>大促</aside>
                    </li>
                    <li>
                        <a><img src="../img/sugimg1.jpg" /></a>
                        <h3>2020年足迹系列卫衣 人类首次突破音速</h3>
                        <p>精心裁剪、版型百搭、舒适服帖、易于打理</p>
                        <b>
                            <span class="black checked"></span>
                            <span></span>
                            <span class="blue"></span>
                            <span class="gray"></span>
                        </b>
                        <em>&yen;224.00<del>&yen;249.00</del></em>
                        <i>买赠</i>
                        <aside>大促</aside>
                    </li>
                    <li>
                        <a><img src="../img/sugimg2.jpg" /></a>
                        <h3>Smartisan 真无线蓝牙耳机</h3>
                        <p>抖音文创限量款</p>
                        <b>
                        </b>
                        <em>&yen;279.00<del>&yen;299.00</del></em>
                        <i>买赠</i>
                        <aside class="showtips">大促</aside>
                    </li>
                </ul>
                <ul>
                    <li>
                        <a><img src="../img/sugimg3.jpg" /></a>
                        <h3>坚果R2</h3>
                        <p>是下一代手机，更是下一代电脑</p>
                        <b></b>
                        <em>&yen;4,799.00</em>
                        <i class="showtips">买赠</i>
                        <aside>大促</aside>
                    </li>
                    <li>
                        <a><img src="../img/sugimg4.jpg" /></a>
                        <h3>Smartisan TNT 大满足套装</h3>
                        <p>下一代手机，下一代电脑</p>
                        <b></b>
                        <em>&yen;6,999.00</em>
                        <i>买赠</i>
                        <aside>大促</aside>
                    </li>
                    <li>
                        <a><img src="../img/sugimg5.jpg" /></a>
                        <h3>2020年足迹系列卫衣 人类首次突破音速</h3>
                        <p>精心裁剪、版型百搭、舒适服帖、易于打理</p>
                        <b>
                            <span class="black checked"></span>
                            <span></span>
                            <span class="blue"></span>
                            <span class="gray"></span>
                        </b>
                        <em>&yen;224.00<del>&yen;249.00</del></em>
                        <i>买赠</i>
                        <aside>大促</aside>
                    </li>
                    <li>
                        <a><img src="../img/sugimg6.jpg" /></a>
                        <h3>Smartisan 真无线蓝牙耳机</h3>
                        <p>抖音文创限量款</p>
                        <b>
                        </b>
                        <em>&yen;279.00<del>&yen;299.00</del></em>
                        <i>买赠</i>
                        <aside class="showtips">大促</aside>
                    </li>
                </ul>
                <ul>
                    <li>
                        <a><img src="../img/sugimg7.jpg" /></a>
                        <h3>坚果R2</h3>
                        <p>是下一代手机，更是下一代电脑</p>
                        <b></b>
                        <em>&yen;4,799.00</em>
                        <i class="showtips">买赠</i>
                        <aside>大促</aside>
                    </li>
                    <li>
                        <a><img src="../img/sugimg8.jpg" /></a>
                        <h3>Smartisan TNT 大满足套装</h3>
                        <p>下一代手机，下一代电脑</p>
                        <b></b>
                        <em>&yen;6,999.00</em>
                        <i>买赠</i>
                        <aside>大促</aside>
                    </li>
                    <li>
                        <a><img src="../img/hot1.png" /></a>
                        <h3>2020年足迹系列卫衣 人类首次突破音速</h3>
                        <p>精心裁剪、版型百搭、舒适服帖、易于打理</p>
                        <b>
                            <span class="black checked"></span>
                            <span></span>
                            <span class="blue"></span>
                            <span class="gray"></span>
                        </b>
                        <em>&yen;224.00<del>&yen;249.00</del></em>
                        <i>买赠</i>
                        <aside>大促</aside>
                    </li>
                    <li>
                        <a><img src="../img/hot2.png" /></a>
                        <h3>Smartisan 真无线蓝牙耳机</h3>
                        <p>抖音文创限量款</p>
                        <b>
                        </b>
                        <em>&yen;279.00<del>&yen;299.00</del></em>
                        <i>买赠</i>
                        <aside class="showtips">大促</aside>
                    </li>
                </ul>
                <ul>
                    <li>
                        <a><img src="../img/hot3.png" /></a>
                        <h3>坚果R2</h3>
                        <p>是下一代手机，更是下一代电脑</p>
                        <b></b>
                        <em>&yen;4,799.00</em>
                        <i class="showtips">买赠</i>
                        <aside>大促</aside>
                    </li>
                    <li>
                        <a><img src="../img/hot4.jpg" /></a>
                        <h3>Smartisan TNT 大满足套装</h3>
                        <p>下一代手机，下一代电脑</p>
                        <b></b>
                        <em>&yen;6,999.00</em>
                        <i>买赠</i>
                        <aside>大促</aside>
                    </li>
                </ul> -->
            
            </ul>
            
            <!-- 模板引擎渲染数据 -->
            <script type="text/html" id="listTemplate">
                {{each list item}}
                <li>
                    <a><img src="{{item.images}}" /></a>
                    <h3>{{item.spuTitle}}</h3>
                    {{if item.spuSubTitle}}
                    <p>{{item.spuSubTitle}}</p>
                    {{else}}
                    <p>热卖商品</p>
                    {{/if}}
                    <b> 

                    </b>
                    <em>&yen;{{item.discountPrice}}</em>
                    <i class="{{item.tagText?(item.tagText=='买赠'||item.tagText=='秒杀'?'redtext':'yellowtext'):''}}">{{item.tagText}}</i>
                    <aside></aside>
                </li>
                {{/each}}
            </script>
        </div>
    </section>
    <footer>
    </footer>
    <!-- <script src="../js/jquery.min.js"></script>
    <script src="../js/list.js"></script> -->
    <script src="/lib/require/require.min.js" data-main="/js/list"></script>

</body>

</html>